<template>
	<view class="market-box">
		<!-- 导航栏左侧插槽 -->
		<!-- <uni-nav-bar background-color="#fff" color="#000" :status-bar="true" title="供求市场" fixed>
			
			<view slot="left">
				<view class="navWp">
					<view class="back" @click="goBack">
						<u-icon name="arrow-left" color="#000000" size="50"></u-icon>
					</view>
				</view>
			</view>
		</uni-nav-bar> -->
		<!-- 顶部tab切换 -->
		<!-- 	<view class="tab-box">
			<view :class="tabClickIndex==index?'tab-wrap tab-active':'tab-wrap tab-unactive'"
				v-for="(item,index) in tabList" :key="index" @click="tabClick(item,index)">
				<view :class="tabClickIndex==index?'tab-cicle tab-acticve-cicle':'tab-cicle tab-unacticve-cicle'">
					<img :src="item.imgUrl" alt="">
				</view>
				<text>{{item.name}}</text>
			</view>
		</view> -->
		<view class="">
			<u-tabs :list="marketMenuLists1" :current="tabsCurrent" @change="tabChanged" @click="marketMenuClick">
			</u-tabs>
		</view>
		<view class="">
			<marketBuyPage v-if="marketBuyShow"></marketBuyPage>
			<marketSupplyPage v-if="marketSupplyShow"></marketSupplyPage>
		</view>
	</view>


</template>

<script>
	import {
		mapState
	} from 'vuex'
	import marketBuyPage from '@/pagesBusiness/marketPage/marketBuyPage.vue'
	import marketSupplyPage from '@/pagesBusiness/marketPage/marketSupplyPage.vue'
	export default {
		components: {
			marketBuyPage,
			marketSupplyPage
		},
		data() {
			return {
				tabList: [{
						imgUrl: 'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png',
						name: '活动'
					},
					{
						imgUrl: 'https://file.casugn.com/storecompcard//WYWMCallue7ueed3b042042bb6067c70420fb8327f23_1660099871888.png',
						name: '供求市场'
					},
					{
						imgUrl: 'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png',
						name: '我的'
					},
				],
				tabClickIndex: 1, //tab选中的index值
				marketMenuLists1: [{
					name: '找采购',
					id: 0,
				}, {
					name: '找供应',
					id: 1,
				}],
				typeValue1: 0, //0-找采购 1-找供应 
				defaluteStatus: 1,
				keyword: '', //供求市场搜索
				marketBuyShow: true,
				marketSupplyShow: false,

				buyArr: [], //采购列表

				supplyArr: [], //供应列表


				total: 0,
				pageNo: 1,
				pageSize: 10,
				openId: '',
				searchVal: '',
				tabsCurrent: 0,
			};
		},
		// created(){
		// 	console.log("created显示")
		// 	this.marketBuyShow=true
		// },
		onShow() {
			let a = uni.getStorageSync(`supplyJumpTo`)
			console.log(a)
			if (a == 1) {
				let data = {
					name: '找供应',
					id: 1,
				}
				this.marketMenuClick(data)
			} else {
				let data = {
					name: '找采购',
					id: 0,
				}
				this.marketMenuClick(data)
			}

		},
		mounted() {
			let a = uni.getStorageSync(`supplyJumpTo`)
			console.log(a)
			if (a == 1) {
				let data = {
					name: '找供应',
					id: 1,
				}
				this.marketMenuClick(data)
			} else {
				let data = {
					name: '找采购',
					id: 0,
				}
				this.marketMenuClick(data)
			}
		},
		// onReachBottom() {
		// 	// console.log(1)
		// 	if(this.typeValue1==0){
		// 		console.log("找采购")
		// 		if (this.pageNo * 10 > this.total) {
		// 			uni.showToast({
		// 				title: '没有更多数据',
		// 				icon: 'none'
		// 			})
		// 		}
		// 		this.pageNo++
		// 		this.getBuyLists()
		// 	}else{
		// 		console.log("找供应")
		// 		if (this.pageNo * 10 > this.total) {
		// 			uni.showToast({
		// 				title: '没有更多数据',
		// 				icon: 'none'
		// 			})
		// 		}
		// 		this.pageNo++
		// 		this.getSupplyLists()
		// 	}

		// },
		methods: {
			tabChanged(index) {
				console.log("改变")
				console.log(index)
				console.log("改变")
			},
			// 点击导航栏左侧
			goBack() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			},

			// 找采购列表数据 不用传openId
			getBuyLists() {
				let openId = uni.getStorageSync('openId')
				console.log("openId", openId)
				this.openId = openId.openid
				this.$api.queryMyCouponLists(this.searchVal, '', this.pageNo, this.pageSize).then(res => {
					if (res.success) {
						console.log(res.result.records)
						this.buyArr = [...this.buyArr, ...res.result.records]
						this.total = res.result.total
					}
				})
			},
			// 采购搜索
			searchMethod(val) {
				console.log(val)
				this.buyArr = []
				this.total = 0
				this.pageNo = 1
				this.searchVal = val
				let openId = uni.getStorageSync('openId')
				console.log("openId", openId)
				this.openId = openId.openid
				this.$api.queryMyCouponLists(this.searchVal, this.openId, this.pageNo, this.pageSize).then(res => {
					console.log(res)
					if (res.success) {
						this.buyArr = res.result.records
						this.total = res.result.total
					}
				})
			},
			// 找供应
			getSupplyLists() {
				let data = {
					pageNo: this.pageNo,
					pageSize: 10,
				}
				this.$api.queryMySupplyLists(data).then(res => {
					console.log(res)

					if (res.success) {
						res.result.records.forEach(item => {
							item.imageList = item.imageList.split(',')
						})
						this.supplyArr = [...this.supplyArr, ...res.result.records]
						this.total = res.result.total
					}
				})
			},
			// 状态切换点击
			marketMenuClick(item) {
				console.log(item)
				this.typeValue1 = item.id
				if (this.typeValue1 == 0) {
					this.marketBuyShow = true
					this.marketSupplyShow = false
					this.buyArr = []
					this.total = 0
					this.pageNo = 1
					this.tabsCurrent = 0
					// this.getBuyLists()

				} else {
					this.tabsCurrent = 1
					this.marketBuyShow = false
					this.marketSupplyShow = true
					this.total = 0
					this.pageNo = 1
					this.supplyArr = []
					// this.getSupplyLists()
				}
				this.defaluteStatus = item.id
			},
			// tab切换点击事件
			tabClick(item, index) {
				console.log(index)
				console.log(item)
				this.tabClickIndex = index
				if (index == 1) {
					this.tabList.forEach(item => {
						item.imgUrl =
							'https://file.casugn.com/storecompcard//nhJ5ffGc2zhs60d80f016055f57051d38ff74b8a4e0b_1660098959213.png'
					})
					this.tabList[1].imgUrl =
						'https://file.casugn.com/storecompcard//WYWMCallue7ueed3b042042bb6067c70420fb8327f23_1660099871888.png'

					// uni.navigateTo({
					// 	url: '/pagesBusiness/marketPage/marketPage'
					// })
					// this.mySupPurPageShow=false
					// this.activePageShow=false
					// this.marketPageShow=true
				} else if (index == 0) {
					this.tabList.forEach(item => {
						item.imgUrl =
							'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png'
					})
					this.tabList[0].imgUrl =
						'https://file.casugn.com/storecompcard//CLGdd9HTBntg8bed5fe978d2b4cf096091636771c17b_1658388882147.png'

					uni.navigateTo({
						url: '/pagesBusiness/circleList/circleList'
					})
					// this.activePageShow=true
					// this.marketPageShow=false
					// this.mySupPurPageShow=false
				} else {
					this.tabList.forEach(item => {
						item.imgUrl =
							'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png'
					})
					this.tabList[2].imgUrl =
						'https://file.casugn.com/storecompcard//CLGdd9HTBntg8bed5fe978d2b4cf096091636771c17b_1658388882147.png'

					uni.navigateTo({
						url: '/pagesBusiness/mySupPur/mySupPur'
					})
					// this.mySupPurPageShow=true
					// this.activePageShow=false
					// this.marketPageShow=false
				}
				console.log(this.tabClickIndex)
			},

		}
	}
</script>

<style lang="scss" scoped>
	page,
	.market-box {
		height: 100vh;

		.navWp {
			display: flex;
			align-items: center;

			.back {}

			.user {
				margin-left: 20upx;
			}
		}
	}

	.market-box {
		// background: #F8F9FF;
		position: absolute;
		width: 100%;
		// background: rebeccapurple;
		// height: 100vh;
		z-index: 10;

		.tab-box {
			display: flex;

			.tab-wrap {
				width: 178upx;
				text-align: center;
				height: 199upx;
				position: relative;

				.tab-cicle {
					margin: 0 auto;
					margin-top: 29upx;
					width: 110upx;
					height: 110upx;
					position: relative;
					text-align: center;
					border-radius: 50%;

					img {
						width: 40upx;
						height: 40upx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translateX(-20upx) translateY(-20upx);
					}
				}

				text {
					margin-top: 11upx;
					font-size: 24upx;
					font-weight: 400;
					color: #000000;
					line-height: 30upx;
				}
			}

			.tab-active {
				background: #FFFFFF;
			}

			.tab-unactive {
				background: #F8F9FF;

				img {
					width: 40upx;
					height: 40upx;
				}
			}

			.tab-acticve-cicle {
				background: #413BF3;
			}

			.tab-unacticve-cicle {
				background: transparent;
				border: 2upx solid #413BF3;

				img {
					width: 20upx;
					height: 20upx;
				}
			}
		}

	}
</style>
